<template>
  <ul class="side-navBar">
    <div class="side-bar-title">目录</div>
    <li
      @click="itemClick(index)"
      v-for="(item, index) in navLists"
      :key="index"
      :class="moveIndex === index ? 'activeLight' : ''"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script>
// 本组件只允许放在需要监听滚动页面的最底部，因为我们是通过父元素的节点获得内部所有子元素的高度所以必须要放在父元素中的最底部
export default {
  props: {
    navLists: Array, //每个标题内容
  },
  data() {
    return {
      moveIndex: 0, //当前激活nav栏高亮显示标题的下标
      ContentHeightList: null, //页面中每一栏内容的高度数组
    };
  },
  methods: {
    // 点击nav栏后
    itemClick(index) {
      // 获取父元素的dom元素
      let pageScrooll = document.querySelector(".side-navBar").parentNode;
      // console.log(pageScrooll.children[index].offsetTop + 520);
      // 激活当前高亮nav栏
      this.moveIndex = index;
      // 点击后滚动到相应的区域
      window.scrollTo({
        top: pageScrooll.children[index].offsetTop, //举例：用户点击 第二个标签后 页面就会滚动到第二个标签的高度
        behavior: "smooth", //丝滑滚动
      });
    },
    // 获取页面中每一栏内容的高度数组
    getChildrenHeigh() {
      // 获得他们的父元素节点
      let pageScrooll = document.querySelector(".side-navBar").parentNode;
      let arr = [];
      // console.log(this.navLists.length);
      // 将所有子元素的高度放入arr
      for (let i = 0; i < this.navLists.length; i++) {
        // 把所有获得到的子元素高度都放入arr中
        arr.push(pageScrooll.children[i].offsetTop);
      }
      // 给这个arr兜底，这样可以解决最后一个内容栏监听不到的bug，注意：如果最后一栏内容高度低于滚动条当前的高度，也不会高亮显示最后一栏的标题哦
      arr.push(Number.MAX_VALUE);
      this.ContentHeightList = arr;
      // console.log(this.ContentHeightList);
    },
    // 监听滚轮
    handleScroll() {
      // 获得当前的滚轮高度
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let Heights = this.ContentHeightList;
      // 只有ContentHeightList存在才监听当前高度
      if (this.ContentHeightList) {
        // console.log(scrollTop);
        for (let i = 0; i < Heights.length; i++) {
          // 如果滚轮高度大于当前所在的子元素高度 并且 滚轮高度小于下一个子元素的高度 ，那么说明滚轮在当前内容中，就激活当前的nav栏
          if (scrollTop >= Heights[i] && scrollTop <= Heights[i + 1]) {
            // console.log(i);
            // 那么就激活当前的nav栏
            this.moveIndex = i;
            // return false;
          }
        }
      }
    },
  },
  mounted() {
    // 监听滚动
    window.addEventListener("scroll", this.handleScroll, true);
    // 获得内容高度
    this.getChildrenHeigh();
  },
  destroyed() {
    this.ContentHeightList = null;
    window.removeEventListener("scroll", this.handleScroll, true);
  },
};
</script>

<style lang="less" scoped>
.side-bar-title {
  width: 80%;
  height: 40px;
  line-height: 30px;
  text-align: left;
  margin: 0 auto;
  font-size: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}
.side-navBar {
  transition: 0.5s linear all;
  position: fixed;
  top: 280px;
  right: 20px;
  width: 230px;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  z-index: 99999;
  padding: 23px 0 0 0;
  li {
    margin-bottom: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 20px;
    cursor: pointer;
    padding-right: 150px;
    position: relative;
  }
}
.activeLight {
  color: #096dd9 !important;
}
</style>

